import 'package:flutter/material.dart';
import 'package:flutterapp/common/base/base_page.dart';
import 'package:webview_flutter/webview_flutter.dart';

/// webview组件
class WebViewPage extends StatefulWidget {
  final String? url;
  final String? title;
  final String? des;
  final bool showShare;

  const WebViewPage(
      {Key? key, this.url, this.title, this.des, this.showShare = true})
      : super(key: key);

  @override
  _WebViewPageState createState() => _WebViewPageState();
}

class _WebViewPageState extends State<WebViewPage> {
  //是否显示加载弹窗
  bool showLoading = true;

  //加载进度
  int progress = 0;

  late WebViewController _webViewController;

  @override
  void initState() {
    super.initState();

    _webViewController = WebViewController()
      ..setJavaScriptMode(JavaScriptMode.unrestricted)
      ..setBackgroundColor(const Color(0x00000000))
      ..setNavigationDelegate(
        NavigationDelegate(
          onProgress: (int value) {
            setState(() {
              progress = value;
              if (value >= 100) {
                showLoading = false;
              } else {
                showLoading = true;
              }
            });
          },
          onPageStarted: (String url) {},
          onPageFinished: (String url) {},
          onWebResourceError: (WebResourceError error) {},
          onNavigationRequest: (NavigationRequest request) {
            if (request.url.contains('http:') ||
                request.url.contains('https:')) {
              return NavigationDecision.navigate;
            } else {
              return NavigationDecision.prevent;
            }
          },
        ),
      )
      ..loadRequest(Uri.parse(widget.url ?? ''));
  }

  @override
  void dispose() {
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return BasePage(
      title: widget.title ?? '',
      appBar: AppBar(
        title: FutureBuilder<String?>(
          initialData: widget.title,
          future: _webViewController.getTitle(),
          builder: (context, value) => Text(value.data ?? ''),
        ),
        actions: [
          IconButton(
              onPressed: () {
                Navigator.pop(context);
              },
              icon: Icon(
                Icons.home_outlined,
              )),
        ],
      ),
      onWillPop: () async {
        bool canGoBack = await _webViewController.canGoBack();
        if (canGoBack) {
          _webViewController.goBack();
        } else {
          Navigator.pop(context);
        }
        return !canGoBack;
      },
      child: Stack(
        alignment: Alignment.center,
        children: [
          WebViewWidget(controller: _webViewController),
          // WebVieww(
          //   initialUrl: widget.url ?? '',
          //   javascriptMode: JavascriptMode.unrestricted,
          //   navigationDelegate: (request) {
          //     if (request.url.contains('http:') ||
          //         request.url.contains('https:')) {
          //       return NavigationDecision.navigate;
          //     } else {
          //       return NavigationDecision.prevent;
          //     }
          //   },
          //   onWebViewCreated: (webViewController) {
          //     _webViewController = webViewController;
          //   },
          //   onProgress: (value) {
          //     setState(() {
          //       progress = value;
          //       if (value >= 100) {
          //         showLoading = false;
          //       } else {
          //         showLoading = true;
          //       }
          //     });
          //   },
          //   onPageStarted: (value) {
          //     LogUtils.d('onPageStarted--$value');
          //   },
          //   onPageFinished: (value) {
          //     LogUtils.d('onPageFinished--$value');
          //   },
          // ),
          //加载提示
          Visibility(
            visible: showLoading,
            child: UnconstrainedBox(
              child: Container(
                alignment: Alignment.center,
                padding: const EdgeInsets.all(12),
                decoration: BoxDecoration(
                  color: Colors.grey,
                  borderRadius: BorderRadius.circular(4),
                ),
                child: Column(
                  crossAxisAlignment: CrossAxisAlignment.center,
                  mainAxisSize: MainAxisSize.min,
                  children: [
                    CircularProgressIndicator(),
                    Padding(
                      padding: const EdgeInsets.only(top: 12),
                      child: Text('加载中$progress%...'),
                    ),
                  ],
                ),
              ),
            ),
          ),
        ],
      ),
    );
  }
}
